<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生列表</title>

    <!--引入ElementUI的css文件-->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <!--引入vue和ElementUI的js文件-->
    <script src="../js/vue.js"></script>

    <script src="element-ui/lib/index.js"></script>

</head>
<body>
<div id="div">
    <el-container>
        <!--头部-->
        <el-header style="background-color: #545c64">
            <el-row>
                <!--export图片-->
                <el-col :span="3"><img src="img/export.png" style="margin-top: 20px"/></el-col>
                <!--顶部导航栏-->
                <el-col :span="6" :offset="15">
                    <el-menu
                            :default-active="activeIndex"
                            class="el-menu-demo"
                            mode="horizontal"
                            @select="handleSelect"
                            background-color="#545c64"
                            text-color="#fff"
                            active-text-color="#ffd04b">
                        <el-menu-item index="1">处理中心</el-menu-item>
                        <el-submenu index="2">
                            <template slot="title">我的工作台</template>
                            <el-menu-item index="2-1">选项1</el-menu-item>
                            <el-menu-item index="2-2">选项2</el-menu-item>
                            <el-menu-item index="2-3">选项3</el-menu-item>
                            <el-menu-item index="2-4">选项4</el-menu-item>
                        </el-submenu>
                        <el-menu-item index="4"><a href="https://www.itheima.com" target="_blank">首页</a></el-menu-item>
                    </el-menu>
                </el-col>
            </el-row>
        </el-header>

        <el-container>
            <!--侧边栏-->
            <el-aside width="200px" style="height: 800px;background-color: #545c64">
                <el-row>
                    <el-col :span="24">
                        <el-menu
                                default-active="1-1"
                                class="el-menu-vertical-demo"
                                @open="handleOpen"
                                @close="handleClose"
                                background-color="#545c64"
                                text-color="#fff"
                                active-text-color="#ffd04b">
                            <el-submenu index="1">
                                <template slot="title">
                                    <i class="el-icon-platform-eleme"></i>
                                    <span>学工部</span>
                                </template>
                                <el-menu-item index="1-1"><i class="el-icon-loading"></i>在校学生管理</el-menu-item>
                                <el-menu-item index="1-2"><i class="el-icon-loading"></i>学生升级/留级</el-menu-item>
                                <el-menu-item index="1-3"><i class="el-icon-loading"></i>学生就业情况</el-menu-item>
                            </el-submenu>

                            <el-submenu index="2">
                                <template slot="title">
                                    <i class="el-icon-menu"></i>
                                    <span>咨询部</span>
                                </template>
                                <el-menu-item index="2-1"><i class="el-icon-loading"></i>意向学生管理</el-menu-item>
                                <el-menu-item index="2-2"><i class="el-icon-loading"></i>未报名学生管理</el-menu-item>
                                <el-menu-item index="2-3"><i class="el-icon-loading"></i>已报名学生管理</el-menu-item>
                            </el-submenu>

                            <el-submenu index="3">
                                <template slot="title">
                                    <i class="el-icon-menu"></i>
                                    <span>教研部</span>
                                </template>
                                <el-menu-item index="3-1"><i class="el-icon-loading"></i>已有课程管理</el-menu-item>
                                <el-menu-item index="3-2"><i class="el-icon-loading"></i>正在研发课程管理</el-menu-item>
                                <el-menu-item index="3-3"><i class="el-icon-loading"></i>新技术课程管理</el-menu-item>
                            </el-submenu>
                        </el-menu>
                    </el-col>
                </el-row>
            </el-aside>
            <!--主体区域-->
            <el-main>
                <!--学生列表标题和添加学生按钮-->
                <el-row>
                    <el-col :span="3"><b><font color="red" size="5">学生列表</font></b></el-col>
                    <el-col :span="2" :offset="19"><el-button type="primary">添加学生</el-button></el-col>
                </el-row>
                <!--展示表格数据-->
                <el-row>
                    <template>
                        <el-table
                                :data="tableData"
                                style="width: 100%">
                            <el-table-column
                                    label="日期"
                                    prop="date">
                            </el-table-column>
                            <el-table-column
                                    label="姓名"
                                    prop="name">
                            </el-table-column>
                            <el-table-column
                                    label="地址"
                                    prop="address">
                            </el-table-column>
                            <el-table-column
                                    label="操作"
                                    align="center">
                                <template slot-scope="scope">
                                    <el-button
                                            size="mini"
                                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                    <el-button
                                            size="mini"
                                            type="danger"
                                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </el-row>
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<script>
    new Vue({
        el:"#div",
        data:{
            activeIndex: '1',
            tableData: [{
                date: '2016-05-02',
                name: '王566',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '钱钱',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }, {
                date: '2016-05-03',
                name: '566',
                address: '湖北 1516 弄'

            }]
        },

        methods: {
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            }
        }
    });
</script>
</html>